<template>
  <div class="markdown-editor-box">
    <div style="background-color: white; padding: 10px">
      <el-form :inline="true" size="mini">
        <el-form-item label="">
          <el-button type="primary" size="mini" @click="getMarkdown"
            >获取MarkDown</el-button
          >
          <el-button type="primary" size="mini" @click="getHTML"
            >获取HTML</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <blockquote v-if="env !== 'production'">
      <link rel="stylesheet" href="/static/editor.md/css/editormd.min.css" />
      <link
        rel="stylesheet"
        :href="'/static/editor.md/css/google_code_prettify_themes/' + codeTheme"
      />
    </blockquote>
    <blockquote v-if="env === 'production'">
      <link rel="stylesheet" href="./static/editor.md/css/editormd.min.css" />
      <link
        rel="stylesheet"
        :href="
          './static/editor.md/css/google_code_prettify_themes/' + codeTheme
        "
      />
    </blockquote>

    <div :id="editorId"></div>
  </div>
</template>
<script>
// 参考：https://www.lwl.tech/post/3
import scriptjs from "scriptjs";
import { defaultConfig, codeThemes } from "./../../../../config/editor.md";
export default {
  props: {
    editorId: {
      type: String,
      default: "markdown-editor",
    },
    onchange: {
      // 内容改变时回调，返回（html, markdown, text）
      type: Function,
    },
    config: {
      // 编辑器配置
      type: Object,
    },
    codeTheme: {
      // 代码高亮主题
      type: String,
      default: "vibrant-ink.min.css",
    },
    initData: {
      type: String,
    },
    initDataDelay: {
      type: Number, // 延迟初始化数据时间，单位毫秒
      default: 0,
    },
  },
  data: function () {
    return {
      env: process.env.NODE_ENV,
      editor: null,
      codeThemes,
      editorLoaded: false,
    };
  },
  methods: {
    fetchScript: function (url) {
      return new Promise((resolve) => {
        scriptjs(url, () => {
          resolve();
        });
      });
    },
    getConfig: function () {
      return { ...defaultConfig, ...this.config };
    },
    initEditor: function () {
      (async () => {
        if (process.env.NODE_ENV === "production") {
          await this.fetchScript("./static/editor.md/jquery.min.js");
          await this.fetchScript("./static/editor.md/editormd.min.js");
        } else {
          await this.fetchScript("/static/editor.md/jquery.min.js");
          await this.fetchScript("/static/editor.md/editormd.min.js");
        }

        // await this.fetchScript('/static/editor.md/editormd.js');
        this.$nextTick(() => {
          let editor = window.editormd(this.editorId, this.getConfig());
          editor.on("load", () => {
            setTimeout(() => {
              // hack bug: 一个页面多个编辑器只能初始化其中一个数据问题
              this.editorLoaded = true;
              this.initData && editor.setMarkdown(this.initData);
            }, this.initDataDelay);
          });
          this.onchange &&
            editor.on("change", () => {
              let html = editor.getPreviewedHTML();
              this.onchange({
                markdown: editor.getMarkdown(),
                html: html,
                text: window.$(html).text(),
              });
            });
          this.editor = editor;
        });
      })();
    },

    /**
     *
     */
    getHTML() {
      this.$alert(this.editor.getHTML(), "HTML片段");
    },
    getMarkdown() {
      this.$alert(this.editor.getMarkdown(), "Markdown片段");
    },
  },
  mounted: function () {
    // 初始化
    defaultConfig.markdown = "# MarkDown";
    this.initEditor();
  },
  watch: {
    initData: function (newVal) {
      if (newVal) {
        this.editorLoaded && this.editor.setMarkdown(newVal);
      }
    },
  },
};
</script>
<style lang="less">
.el-message-box__container {
  max-height: 500px;
  overflow: auto;
}
</style>